// JSX底层渲染机制
import React from 'react'
import { createElement, render } from './jsxHand'

export default function JSXdcyl() {
    console.log(React.createElement(
        'h1', {
        title: "\u6211\u662F\u6807\u9898",
        x: 10,
        data: [100, 200],
        className: "box",
        style: {
            fontSize: '20px'
        }
    },
        React.createElement(
            'h2', {
            title: "\u6211\u662F\u6807\u9898",
            x: 10,
            data: [100, 200],
            className: "box2",
            style: {
                fontSize: '20px'
            }
        })
    )
    );

    return  (
        <div>
            JSXdcyl
            {React.createElement('button',null,'提交')}
        </div>
    )
}

// 下列代码不会报错，但是刷新后不会显示
// let styObj = {
//     color: 'red',
//     fontSize: '26px'
//   }
//   let x = 10
//   let y = 20
// let jsObj=createElement("div", {
//   className: "containet",
//   children: [
//     /*#__PURE__*/ createElement("p", {
//       children: "123"
//     }),
//     // /*#__PURE__*/ createElement(JSXdcyl, {}),
//     /*#__PURE__*/ createElement("h2", {
//       className: "title",
//       style: styObj,
//       children: "\u5C0F\u53F6Demo"
//     }),
//     /*#__PURE__*/ createElement("div", {
//       className: "box",
//       children: [
//         /*#__PURE__*/ createElement("span", {
//           children: x
//         }),
//         /*#__PURE__*/ createElement("span", {
//           children: y
//         })
//       ]
//     })
//   ]
// })

// render(jsObj,document.getElementById('root'))
